<template>
	<view class="carContainer" :class="{new:isNew}">
		<view class="m-card-container" :class="{active:topLine}" >
			<view class="card-image">
				<image class="image" :src="data.images" :lazy-load="true" />
			</view>
			<view class="card-info">
				<view>
					<text class="title">车型：{{data.craneName||'无'}}</text>
					<text class="title">品牌：{{data.cbrandName||'无'}}</text>
				</view>
				<text class="text">{{data.introduce}}</text>
				<view v-if="isNew" class="price">
					指导价：<text class="price-text">{{(data.userid/10000).toFixed(2)}}万</text>
				</view>
			</view>
		</view>
		<view class="search-info botto-line" v-if="hasSearchInfo">
			<view class="item title">工况信息</view>
			<view class="item more" @click="messageToggle"><text>更多工况</text></view>
			<view class="item">
				臂长组合模式：<text>{{searchInfo.combination}}</text>
			</view>
			<view class="item">
				超起配重/配重：<text>{{searchInfo.inputWeight}}t</text>
			</view>
			<view class="item">
				主臂长度范围：<text>{{searchInfo.mainArmLength}}m</text>
			</view>
			<view class="item" v-if="searchInfo.combination==2">
				副臂长度范围：<text>{{searchInfo.jibLength}}m</text>
			</view>
			<view class="item" v-if="searchInfo.combination==3">
				塔矿长度范围：<text>{{searchInfo.mineTower}}m</text>
			</view>
			<view class="item">
				起升高度：<text>{{Math.sqrt(Math.pow(Number(curCondition.primaryLength),2) - Math.pow(Number(curCondition.radius),2)).toFixed(2)}}m</text>
			</view>
			<view class="item">
				作业半径：<text>{{curCondition.radius}}m</text>
			</view>
			<view class="item">
				额定起重量：<text>{{curCondition.weight}}t</text>
			</view>
			<view class="item">
				力矩百分比范围：<text>{{searchInfo.momentPercentage}}%</text>
			</view>
			<view class="item">
				伸臂方式：<text>{{curCondition.way}}</text>
			</view>
			<view class="item" v-if="searchInfo.obstacle==='true'">
				障碍物高度：<text>{{searchInfo.obstacleHeight}}m</text>
			</view>
			<view class="item" v-if="searchInfo.obstacle==='true'">
				回转中心距离：<text>{{searchInfo.centerDistance}}m</text>
			</view>
			<view class="item" v-if="searchInfo.obstacle==='true'">
				吊物距障碍物距离：<text> {{curCondition.radius - searchInfo.obstacleDistance}}m</text>
			</view>
		</view>
		<view v-if="hasOperate" class="buttonBox">
			<text v-for="(item, index) in buttons" :key="index" @click="onOperate(index)"
				:class="{active:item.active}">{{item.text}}</text>
		</view>

		<uni-popup ref="message" type="message">
			<view class="condition-box">
				<view class="title">工况列表</view>
				<scroll-view class="scrollX" scroll-y="true" lower-threshold='240' @scrolltolower="lower">
					<view class="search-info carCondition" :class="{'active':curCondition.id==item.id}"
						v-for="(item,index) in conditionList" :key="index" @click="selectCarInfo(index)">
						<view class="item">
							臂长组合模式：<text>{{searchInfo.combination}}</text>
						</view>
						<view class="item">
							超起配重/配重：<text>{{searchInfo.inputWeight}}t</text>
						</view>
						<view class="item">
							主臂长度范围：<text>{{searchInfo.mainArmLength}}m</text>
						</view>
						<view class="item" v-if="searchInfo.combination==2">
							副臂长度范围：<text>{{searchInfo.jibLength}}m</text>
						</view>
						<view class="item" v-if="searchInfo.combination==3">
							塔矿长度范围：<text>{{searchInfo.mineTower}}m</text>
						</view>
						<view class="item">
							起升高度：<text>{{Math.sqrt(Math.pow(Number(data.primaryLength),2) - Math.pow(Number(item.radius),2)).toFixed(2)}}m</text>
						</view>
						<view class="item">
							作业半径：<text>{{item.radius}}m</text>
						</view>
						<view class="item">
							额定起重量：<text>{{item.weight}}t</text>
						</view>
						<view class="item">
							力矩百分比范围：<text>{{searchInfo.momentPercentage}}%</text>
						</view>
						<view class="item">
							伸臂方式：<text>{{item.way}}</text>
						</view>
						<view class="item" v-if="searchInfo.obstacle==='true'">
							障碍物高度：<text>{{searchInfo.obstacleHeight}}m</text>
						</view>
						<view class="item" v-if="searchInfo.obstacle==='true'">
							回转中心距离：<text>{{searchInfo.centerDistance}}m</text>
						</view>
						<view class="item" v-if="searchInfo.obstacle==='true'">
							吊物距障碍物距离：<text> {{item.radius - searchInfo.obstacleDistance}}m</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		compbindCrane,		addCollection,
		getWayList,
		member,
		
	} from '@/api/crane.js'
	import {
		goPage
	} from '@/utils/crane'
	const app = getApp();
	export default {
		props: {
			topLine: {
				type: Boolean,
				default: true
			},
			hasOperate: {
				type: Boolean,
				default: false
			},
			isNew: {
				type: Boolean,
				default: false
			},
			isDetails: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object,
				default: {}
			},
			hasSearchInfo: {
				type: Boolean,
				default: false
			},
			searchInfo: {
				type: Object,
				default: {}
			}

		},
		components: {

		},
		name: 'carCard',
		data() {
			return {
				isFlag:"select",
				gongsi:1,
				huiyuan:1,
				legType: {
					1: '仅主臂',
					2: '主臂+塔矿',
					3: '主臂+副臂'
				},
				buttons: [{
					text: '添加',
					active: false
				}, {
					text: '收藏',
					active: false
				}, {
					text: '模拟参数',
					active: false
				}, {
					text: '参数表',
					active: false
				}],
				userid: '',
				conditionList: [],
				pageindex: 1,
				pagesize: 20,
				isadds:"",
				loading: false,
				curCondition: {
					angle: '',
					craneid: '',
					id: '',
					legtype: '',
					minorLength: '',
					origin: '',
					primaryLength: '',
					radius: '',
					way: '',
					weight: '',
					weightid: '',
				},
			};
		},
		computed: {

		},
		watch: {
			curCondition(data) {
				console.log('curCondition', data);
			}
		},
		onReady() {
			this.userid = this.$store.state.app.uid;
		},
		mounted: function() {
			this.curCondition = {
				angle: '',
				craneid: this.data.id,
				id: this.data.wayid,
				legtype: this.data.legtype,
				minorLength: this.data.minorLength,
				origin: '',
				primaryLength: this.data.primaryLength,
				radius: this.data.radius,
				way: this.data.way,
				weight: this.data.weight,
				weightid: this.data.weightid,
			}
		},
		methods: {
			messageToggle() {
				this.$refs.message.open('center');
				if (!this.conditionList.length) {
					this.getWayList();
				}
			},
			lower: function() {
				if (this.loading) {
					return
				}
				this.pageindex += 1;
				this.getWayList();
			},
			getWayList: function() {
				if (this.loading) {
					return
				}
				getWayList({
					craneid: this.data.id,
					cweightid: this.data.weightid,
					pageindex: this.pageindex,
					pagesize: this.pagesize,
				}).then(res => {
					this.conditionList = [...this.conditionList, ...res.data.wayList];
				}).finally(() => {
					setTimeout(() => {
						this.loading = false;
					}, 500)
				})
			},
			onOperate: function(type) {
				const TYPE = {
					add: 0,
					fav: 1,
					sim: 2,
					arg: 3
				}
				switch (type) {
					case TYPE.add:
						this.operateAdd();
						break;
					case TYPE.fav:
						this.operateFav();
						break;
					case TYPE.sim:
						this.operateSim();
						break;
					case TYPE.arg:
						this.operateArg();
						break;
				}
			},
			operateAdd: function() {
				var that=this
				member(this.$store.state.app.uid,this.isFlag).then(res=>{
					that.isadds=res.data.isCreateCom
					if(res.data.isCreateCom==0){
						uni.showModal({
							title:"提示",
							content:"您尚未创建公司，请前往入驻",
							success:function(res) {
								if(res.confirm){
									console.log("确定")
									uni.navigateTo({
										url:"/pages/companySettled/index"
									})
								}else if(res.cancel){
									console.log("取消")
								}
							}
						})
					}
					if(res.data.isCreateCom!==0){
						// if (!that.buttons[0].active) {
						// 	that.buttons[0] = {
						// 		text: '已添加',
						// 		active: true
						// 	};
						// 	uni.showToast({
						// 		title:"添加成功"
						// 	})
						// } else {
						// 	that.buttons[0] = {
						// 		text: '添加',
						// 		active: false
						// 	};
						// }
						if(this.isadds==0){
								uni.showModal({
									title:"提示",
									content:"您当前未创建公司，请创建公司后添加",
									success:function(res) {
										if(res.confirm){
											console.log("确定")
											uni.navigateTo({
												url:"/pages/companySettled/index"
											})
										}else if(res.cancel){
											console.log("取消")
										}
									}
								})
								
						}else if (!this.buttons[0].active) {
							uni.showToast({
									title:"添加成功"
								})
							this.buttons[0] = {
								text: '已添加',
								active: true
							};
						} else {
							this.buttons[0] = {
								text: '添加',
								active: false
							};
							
						}
						this.buttons = [...this.buttons];
					}
					
				})
			
				
				if (!this.buttons[0].active) {
					console.log("添加")
					// todo 暂时接口有问题
					compbindCrane({
						companyid:1,
						craneid:this.data.id,
						userid:this.$store.state.app.uid
					}).then(res=>{
						console.log("添加123",res)
					})
					console.log('data----',this.data);
				
				// 	var formDate = new FormData();
				// 	formDate.append("companyid","1");
				// 	formDate.append("craneid",this.data.id);
				// 	formDate.append("userid",this.$store.state.app.uid);
					
					if(uni.getStorageSync("payVipDay")==0){
						active: true
					}else{
						
					}
					
				} else {
					
				}
				this.buttons = [...this.buttons];
			},
			operateFav: function() {
				if (!this.buttons[1].active) {
					addCollection({
						craneid:this.data.id,
						userid:this.$store.state.app.uid
					}).then(res=>{
						console.log("添加123",res)
					})
					uni.showToast({
							title:"收藏成功"
						})
					this.buttons[1] = {
						text: '已收藏',
						active: true
					};
				} else {
					this.buttons[1] = {
						text: '收藏',
						active: false
					};
				}
				this.buttons = [...this.buttons];
			},
			operateSim: function() {
				app.globalData.carInfo = {
					brandName: this.data.brandName,
					
					cbrands: this.data.cbrands,
					id: this.data.id,
					maxweight: this.data.maxweight,
					name: this.data.name,
					way: this.data.way,
					weight: this.data.equipweight,
					inputWeight: this.searchInfo.inputWeight,
					legType: this.data.legType,
					primaryLength: this.data.primaryLength,
					radius: this.data.radius,
					minorLength: this.data.minorLength,
					obstacleDistance: this.searchInfo.obstacleDistance,
					obstacleHeight: this.searchInfo.obstacleHeight
				}

				goPage({
					url: '/pages/simulator/index',
					type: 'tab'
				})

			},
			operateArg: function() {
				goPage({
					url: '/pages/bobweight/index',
					query: {
						id: this.data.id,
						// weightid: this.curCondition.weightid
					}
				})
			},
			navToPage: function(cardId, isNew) {
				if (this.isDetails) return;
				const _this = this;
				const url = '/pages/carDetails/index';
				goPage({
					url,
					query: {
						craneid: _this.data.id,
						isNew
					}
				})
			},
			selectCarInfo: function(index) {
				this.curCondition = this.conditionList[index];
				this.$refs.message.close();
			}
		}
	};
</script>

<style lang="scss">
	.carContainer {
		background-color: #FFFFFF;

		.m-card-container {
			padding: 24upx 20upx;
			background-color: #FFFFFF;
			display: flex;
			box-sizing: border-box;
			position: relative;

			&.active::after {
				content: '';
				position: absolute;
				width: calc(100% - 40upx);
				height: 1upx;
				top: 0;
				background-color: #DADADA;
			}

			.card-image {
				flex: 0 0 240upx;
				width: 240upx;
				height: 240upx;
				margin-right: 20upx;

				.image {
					width: 240upx;
					height: 240upx;
				}
			}

			.card-info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					display: block;
					line-height: 42upx;
					font-size: 30upx;
					margin-bottom: 8upx;

				}

				.text {
					line-height: 33upx;
					font-size: 24upx;
					color: #999;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 4;
					-webkit-box-orient: vertical;
				}

				&.new .text {
					-webkit-line-clamp: 2;
				}

				.price {
					display: flex;
					line-height: 50upx;
					font-size: 24upx;

					.price-text {
						font-size: 36upx;
						color: #E95831;
					}
				}
			}
		}

		.buttonBox {
			display: flex;
			justify-content: space-between;

			text {
				display: block;
				flex: 0 0 140upx;
				width: 140upx;
				height: 62upx;
				line-height: 62upx;
				text-align: center;
				font-size: 24upx;
				color: #FFFFFF;
				background-color: #33ADFF;
				border-radius: 31upx;
				margin: 0 20upx 24upx;

				&.active {
					background-color: #CCCCCC;
				}
			}
		}

		.line {
			position: absolute;
			bottom: 0;
			height: 1px;
			width: calc(100% - 40upx);
			background-color: #DADADA;
		}

		.search-info {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 20upx;
			position: relative;


			.item {
				display: flex;
				justify-content: space-between;
				height: 48upx;
				line-height: 48upx;
				color: #666666;
				font-size: 24upx;
				flex: 0 0 48%;

				&.title {
					width: 50%;
					font-size: 26upx;
					color: #212121;
					font-weight: bold;
				}

				&.more {
					width: 50%;
					color: #2291F8;
					text-align: right;
					font-size: 24upx;
					justify-content: flex-end;
				}
			}
		}

		.botto-line::after {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%);
			width: calc(100% - 40upx);
			height: 1px;
			background-color: #DADADA;
			content: '';
		}

		.carCondition {
			background-color: #FFFFFF;
			border: 1px solid #DADADA;
			border-radius: 8upx;
			margin-bottom: 20upx;

			&.active {
				border: 1px solid #2291F8;
			}
		}

		.condition-box {
			border-radius: 8upx;
			background-color: #FFFFFF;
			position: relative;
			padding: 20upx;

			.title {
				margin: 10upx;
			}
		}

		.scrollX {
			width: 680upx;
			margin: 0 auto;
			height: 600upx;

			.title {
				margin: 10upx 0;
				font-size: 25upx;
				color: #212121;
				position: absolute;
				top: 0px;
				z-index: 999;
				background-color: #FFFFFF;
			}
		}
	}
</style>
